<template>
<div class="content">
  <div class="touch-detail-content">
    <div class="common-head">
      <div class="common-sub-title">
        <div class="touch-detail-title tc">
          <ul>
            <li :class="{commonActive:(index == num)}" v-for =" (item, index) in tabTouch" :key="index"  v-text="item.zone_month_sale" @click="tabChange(index, item.zone)"></li>
            <li @click="openPicker()" ><img src="~assets/img/icon_date.png" alt="请选择日"><span ref="day">请选择日</span></li>
          </ul>
        </div>
        <mt-datetime-picker
          ref="picker"
          v-model="pickerValue"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          @confirm="handleConfirm">
        </mt-datetime-picker>
      </div>
    </div>
    <div class="common-total-list">
      <div class="list-title tc">
          <span>编号</span>
          <span>姓名</span>
          <span>级别</span>
          <span>金额</span>
      </div>
      <div class="common-list-item tc touch-list-item"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10"
            :infinite-scroll-immediate-check="true" >
        <ul v-for="(item, index) in moreList" :key="index">
          <li class="day-li" v-text="item.date"></li>
          <li v-for="(subItem,index) in item.persons" :key="index">
            <span v-text="subItem.uid"></span>
            <span v-text="subItem.name">银卡</span>
            <span v-text="subItem.level_name">1000</span>
            <span v-text="subItem.day_sale+'元'"></span>
          </li>
        </ul>
        <p class="page-infinite-loading" ref="spinner">
            <mt-spinner type="fading-circle" color="#23ab1b" class="spinner" ref="spinner"></mt-spinner>
            加载中...
        </p>
        <!-- <button @click="loder" class="common-btn loder">加载更多</button> -->
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { Indicator, Toast } from 'mint-ui'
import axios from 'axios'
import { apiPost } from 'src/common/api.js'
export default {
  data () {
    return {
      pickerValue: null,
      num: 0,
      curDay: null,
      zone: 'l',
      loading: false,
      isScroll: true,
      moreList: [],
      lorderBtn: null,
      tabTouch: [
        {
          zone_month_sale: '左区统计',
          zone: 'l'
        },
        {
          zone_month_sale: '右区统计',
          zone: 'r'
        }
      ]
    }
  },
  mounted () {
    this.$refs.spinner.style.display = 'none'
    this.getInfo()
    setTimeout(() => {
      var sss = document.getElementsByClassName('picker-slot')
      Array.from(sss)[0].style.display = 'none'
      Array.from(sss)[1].style.display = 'none'
    }, 300)
  },
  methods: {
    // 加载更多
    loadMore () {
      if (this.isScroll) {
        this.$refs.spinner.style.display = 'block'
        this.loading = true
        let curmonth = this.$route.params.month
        let selectYear = this.$cookie.get('selectYear')
       setTimeout(() => {
            apiPost('amount_more',
            {
              year: selectYear,
              month: curmonth,
              day: this.curDay,
              zone: this.zone,
              start: this.moreList.length,
              count: 10
            }).then((res) => {
            if (res.status === 0) {
              this.loading = false
              let data = res.data
              if (data.list.length > 0) {
                this.moreList = this.moreList.concat(data.list)
              } else {
                this.isScroll = false
                Toast({ message: '没有更多了',position: 'bottom', duration: 1000})
                this.$refs.spinner.style.display = 'none'
              }
            } else {
              console.log(res.msg)
            }
          })
       },1000)
      }
    },
    // 打开时间控件
    openPicker () {
      this.$refs.picker.open()
    },
    // 时间控件 -- 确定按钮事件
    handleConfirm () {
      if (this.pickerValue === null) {
        this.curDay = 1
        this.getInfo()
      } else{
        let selectDay = this.pickerValue.getDate()
        this.$refs.day.innerHTML = selectDay + '日'
        this.curDay = selectDay
        this.getInfo()
      }
    },
    // 切换左右区
    tabChange (index, zone) {
      this.isScroll = true
      this.num = index
      this.zone = zone
      this.getInfo()
    },
    // 获取量碰详情信息
    getInfo () {
      let curmonth = this.$route.params.month
      let selectYear = this.$cookie.get('selectYear')
      // console.log(selectYear, curmonth)
      apiPost('amount_more',
        {
          year: selectYear,
          month: curmonth,
          day: this.curDay,
          zone: this.zone,
          start: 0,
          count: 10
        }).then((res) => {
        if (res.status === 0) {
          // console.log(res.data)
          let data = res.data
          this.moreList = data.list
          if (data.rest === 0) {
            // loderBtn.innerHTML = '没有更多了'
            // loderBtn.style.opacity = '0.5'
          }
          // console.log(data)
        } else {
          console.log(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  @import '~lib/reset.scss';
  .touch-detail-content {
    margin-top: 10px;
    .common-head {
        background-color: #fff;
      .common-sub-title {
        padding: 0;
        border: none;
        .touch-detail-title {
          ul {
            display: flex;
            justify-content: center;
            align-items: center;
            li {
              flex: 1;
              font-size: $font-16;
              padding: 16px 0;
              border-bottom: 1px solid #e5e5e5;
              &:not(:last-child) {
                border-right: 1px solid #e5e5e5;
              }
              span {
                font-size: $font-16;
              }
            }
            .commonActive {
              color: $color-font-two;
              border-bottom: 1px solid $color-font-two;
            }
          }
        }
      }
    }
    .common-total-title {
      display: flex;
      padding: 16px;
      background-color: #fff;
      justify-content: space-between;
      border-bottom: 1px solid #e5e5e5;
      font-size: $font-15;
      span {
        color: $color-font-two;
      }
      .title-left,.title-right {
        flex: 1;
      }
      .title-left {
        border-right: 1px solid #e5e5e5;
      }
      .title-right {
        text-align: right;
      }
    }
    .loder {
      opacity: 1;
      margin-bottom: 50px;
    }

  }
  .page-infinite-loading {
  text-align: center;
  line-height: 37px;
  .spinner {
    display: inline-block;
    width: 28px;
    vertical-align: middle;
  }
}
</style>
